import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_app/root_page.dart';

class TransitPage extends StatefulWidget {
  TransitPage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => TransitPageState();
}

class TransitPageState extends State<TransitPage> {
  int _currentTime = 1;
  Timer _timer;

  @override
  void initState() {
    super.initState();
    //定时器
    _timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        _currentTime--;
      });
      if (_currentTime <= 0) {
        _jumpRootPage();
      }
    });
  }

  /**
   * 跳转首页
   */
  void _jumpRootPage() {
    _timer.cancel();
    Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
          builder: (BuildContext context) => RootPage(),
        ),
        (route) => false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
          //Stack层叠布局
          children: [
            Image.asset(
              'assets/images/common/page.png',
              fit: BoxFit.cover,
              width: MediaQuery.of(context).size.width, //屏幕的宽
              height: MediaQuery.of(context).size.height, //屏幕的高
            ),
            Positioned(
              top: MediaQuery.of(context).padding.top + 10, //状态栏+10
              right: 10,
              child: InkWell(//根布局需为Scaffold
                //InkWell点击事件
                child: _clipButton(),
                onTap: _jumpRootPage, //onTap点击事件回调
              ),
            )
          ],
        ),
    );
  }

  /**
   * 跳过按钮
   */
  Widget _clipButton() {
    return ClipRRect(
      //ClipRRect圆角
      borderRadius: BorderRadius.circular(50),
      child: Container(
        alignment: Alignment.center,
        width: 50,
        height: 40,
        color: Colors.black.withOpacity(0.5),
        //withOpacity透明度
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, //居中
          //Column上下布局
          children: [
            Text(
              '跳过',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  decoration: TextDecoration.none),
            ),
            Text(
              '${_currentTime}s',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  decoration: TextDecoration.none), //TextDecoration.none去除下划线
            )
          ],
        ),
      ),
    );
  }
}
